<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description"
          content=""/>
    <script src="__PUBLIC__/view/js/jquery-1.8.3.js"></script>
    <script src="__PUBLIC__/view/js/jquery.reveal.js"></script>
    <script src="__PUBLIC__/view/js/jquery.cookie.js"></script>
    <script src="__PUBLIC__/view/js/common.js"></script>
    <!-- 引入 Bootstrap -->
    <link rel="icon" href="__PUBLIC__/view/img/favicon.ico" type="image/x-icon"/>
    <!--[if lte IE 10]>
    <script src="__PUBLIC__/view/js/requestAnimationFrame.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="__PUBLIC__/view/css/bootstrap.min.css" >
    <link rel=stylesheet href="__PUBLIC__/view/css/reset.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/common.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/base.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/header.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shopcart.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/footer_1.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/reveal.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/login.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/order_confirm.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/mycommon.css">
    <title></title>
</head>
<body>

<!--header部分-->
<div class="header shadow"  style="min-width: 0px">
    <div class="search-result">
    </div>
    <div class="header-left fl">
        <div class="icon fl"></div>
        <a class="weixin-dingfan fw" href="#">微信订饭</a>
        <a class="logo" href="#"></a>

        <div class="search none" style="display: none">
            <img class="search-icon" src="__PUBLIC__/view/img/icon_search.png" width="22" height="22">
            <input id="search-input" class="search-input" type="text" placeholder="" onkeypress="onKeySearch()">
            <span id="search-del" class="search-del">&times;</span>
        </div>
        <div class="clear"></div>
    </div>
    <div class="header-right fr">
        <div class="login fl">
                    <span class="header-operater">
                    <a href="place.html">首页</a>
                    <a href="doing.html">订单列表</a>
                    <a href="#" class="hide">联系我们</a>
                    </span>
            <a id="header-login" class="navBtn f-radius f-select n" data-reveal-id="myModal" data-animation="fade">
                登录
            </a>
        </div>
        <div id="cart" class="cart fr">
            <img class="cart-icon" src="__PUBLIC__/view/img/icon_cart_22_22.png">
        </div>
        <div id="user" class="user fr n">
            <img class="user-icon" src="__PUBLIC__/view/img/icon_my.png">
        </div>
    </div>

    <ul id="subnav" class="subnav subnav-shadow n">
        <li><a href="/account/setting" target="">账号设置</a></li>
        <li><a href="/account/order" target="">我的订单</a></li>
        <li><a href="/account/balance" target="">我的余额</a></li>
        <li><a href="/account/score" target="">我的积分</a></li>
        <li><a href="/account/address" target="">我的地址</a></li>
        <li><a id="sub-logout" href="" target="">退出</a></li>
    </ul>
</div>



<div class="order-top-info" style="width: 100%">
    <!--<span>首页&nbsp;&gt;&nbsp;<a class="info-place" onclick="JavaScript:history.go(-1);">确认订单</a></span>-->
    <span>首页&nbsp;&gt;&nbsp;<a class="info-place" href="shop.html">确认订单</a></span>
</div>

<div class="order-confirm-content" style="width: 100%">
    <div class="checkout-info  hide">
        <div class="checkout-title">
            <h2>订单信息</h2>
            <a onclick="JavaScript:history.go(-1);">&lt; 返回菜单修改
            </a>
        </div>
        <div class="checkout-tablehead">
            <div class="cell itemname">商品</div>
            <div class="cell itemquantity">份数</div>
            <div class="cell itemtotal">小计（元）</div>
        </div>
        <ul class="checkout-body">

        </ul>
        <div class="checkout-bottom">
                <span>实付：<a style="color:#f74342;">￥</a><a class="checkout-bottom-price">...</a>
                </span>
        </div>
    </div>

    <!--电脑版界面-->
    <!--<div id="pCheckout-content" class="checkout-content none center-horizontal" style="width: 100%">-->

        <div class="checkout-info none center-horizontal none_position">
            <div class="checkout-title">
                <h2>订单信息</h2>
                <a class="numberTable" href="#">第 x 桌
                </a>
            </div>

            <div class="checkout-tablehead">
                <div class="cell itemname">菜品</div>
                <div class="cell itemquantity">份数</div>
                <div class="cell itemtotal">小计（元）</div>
            </div>
            <ul class="checkout-body">
            </ul>
            <div class="checkout-bottom hide">
                <span>实付：<a style="color:#f74342;">￥</a><a class="checkout-bottom-price">333</a>
                </span>
            </div>
            <!--Vue.js-->
            <div id="app">
                <div class="btnChoice" style="margin-top:40px; display: none">
                    <div class="btn-group">
                        <button v-bind:class="choicePipple == 1 ? 'btn active' : 'btn'" v-on:click="choicePipple = 1">不要辣</button>
                        <button v-bind:class="choicePipple == 2 ? 'btn active' : 'btn'" v-on:click="choicePipple = 2">少量辣</button>
                        <button v-bind:class="choicePipple == 3 ? 'btn active' : 'btn'" v-on:click="choicePipple = 3">多点辣</button>
                    </div>
                    <span ></span>
                    <div class="btn-group">
                        <button v-bind:class="choice2 == true ? 'btn active' : 'btn'" v-on:click="choice2 = !choice2">不要香菜</button>
                        <button v-bind:class="choice3 == true ? 'btn active' : 'btn'" v-on:click="choice3 = !choice3">不要洋葱</button>
                    </div>
                    <div class="btn-group">
                        <button v-bind:class="choice4 == true ? 'btn active' : 'btn'" v-on:click="choice4 = !choice4">多点醋</button>
                        <button v-bind:class="choice5 == true ? 'btn active' : 'btn'" v-on:click="choice5 = !choice5">多点葱</button>
                    </div>
                </div>
                <div class="comment" style="display: none;">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入备注内容(可不填)" v-model="commentContent">
                        <span class="input-group-addon" v-on:click="showSubimtDialog">提交订单</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="clear"></div>
</div>



<script src="__PUBLIC__/view/js/md5.js"></script>
<!--<script src="scripts/login.js"></script>-->
<script src="__PUBLIC__/view/js/cart.lib.js"></script>
<!--<script src="scripts/myInfo.js"></script>-->
<script src="__PUBLIC__/view/js/shopInfo.js"></script>
<script src="__PUBLIC__/view/js/order_my.js"></script>
<!--<script src="scripts/login.js"></script>-->
<script src="__PUBLIC__/view/js/header.js"></script>
<script src="__PUBLIC__/view/js/footer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".footer-content").show();
    });
</script>

<script>
    console.log("shopId>>"+ $.cookie('shopId'));
</script>

<script>

    //就是$(window).resize()所调用的方法；
    var resizePage = function(){

        var zw=$(window).width();
        //设置左侧的高
        var zh=$(window).height();

        var leftHeight=zh-55;

        console.log("resize");

        if(zw>=1000){
            if(zw<1240){

            }else{

            }
//            $("#mCheckout-content").css("display", "none");
        }
        else if(zw<1000){

            if(zw<660){

            }else{

            }

//            $("#mCheckout-content").css("display", "block");
        }
    };

    $(function(){
        //监听窗口尺寸
        $(window).resize(resizePage);
    });

    resizePage();
</script>

<!-- 包括所有已编译的插件 -->
<script src="__PUBLIC__/view/js/bootstrap.min.js"></script>
<!--导入vue.js-->
<script src="__PUBLIC__/view/js/vue.js"></script>
<!--axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

<style>

    .btnChoice {
        margin-top: 15px;
        margin-bottom:10px;
    }
    .btn-group {
        margin-right:20px;
        color: black;
    }

    .btn-group > .btn {
        background: white;
        border: 1px solid #F5F5F5;
    }
    .btn-group > .active {
        background: #FDFBF9;

    }

    .comment >
</style>


<script>
    // 这是我们的Model
    var exampleData = {
        choicePipple:2,
        choice2:true,
        choice3:false,
        choice4:true,
        choice5:false,
        commentContent:""
    };

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData,
        methods: {
            showSubimtDialog: function (event) {
                alert("确认订单！！"+window.exampleData.commentContent);
                this.submitNow();
            },
            submitNow: function() {
                var reqParams = {

                };

                axios.post('/user',         //TODO:
                        reqParams)
                        .then(function (response) {
                            console.log(response.toString());
                        })
                        .catch(function (error) {
                            console.log(error.toString());
                        });
            }
        }
    })
</script>
</html>